<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
    <link rel="stylesheet" href="./demo2.css">
    <title>模板语法</title>
</head>
<!--作业：在原有作业基础上,使用list遍历商品,每个商品初始为100个商品数量，给个input输入，输入1 对应的商品数据要 -1，如果剩余数量为0，不展示-->

<body>
    <div id="gamecard" align="center">
        <h1>商品列表</h1>
        <div id="box">
            <div v-for="games in game" id="lists">
                <div v-if="games.numGame==100">
                    <h2>{{ games.name}}</h2>
                    <a :href=games.web><img v-bind:src="games.imgName" style="width: 500px;height: 400px;"></a>
                    <p>价格：{{games.money}}</p>
                    <input type="text" v-model="games.buy">
                    <p>剩余数量：{{100-games.buy}}</p>
                </div>
                <div v-else="">
                    <h2>库存为0</h2>
                </div>

            </div>
        </div>
    </div>
</body>

<script>

    let app = Vue.createApp({
        data: function () {
            return {
                game: [
                    {
                        name: '塞尔达王国之泪',
                        money: '389元',
                        imgName: './zelda.webp',
                        web: 'https://item.taobao.com/item.htm?spm=a230r.1.14.55.7c425ef5lXXyXO&id=685343519276&ns=1&abbucket=19#detail',
                        numGame: 100,
                        buy: 0
                    },
                    {
                        name: '塞尔达王国之泪',
                        money: '389元',
                        imgName: './zelda.webp',
                        web: 'https://item.taobao.com/item.htm?spm=a230r.1.14.55.7c425ef5lXXyXO&id=685343519276&ns=1&abbucket=19#detail',
                        numGame: 100,
                        buy: 0
                    },
                    {
                        name: '塞尔达王国之泪',
                        money: '389元',
                        imgName: './zelda.webp',
                        web: 'https://item.taobao.com/item.htm?spm=a230r.1.14.55.7c425ef5lXXyXO&id=685343519276&ns=1&abbucket=19#detail',
                        numGame: 100,
                        buy: 0
                    }
                ]
            }
        }

    })

    app.mount("#gamecard");
</script>

</html>